<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>九库拉声学点评网</title>
    <link rel="stylesheet" href="/static/index/css/bootstrap.min.css?v={$version}">
    <link rel="stylesheet" href="/static/index/css/common.css?v={$version}">
    <link rel="stylesheet" href="/static/index/css/content.css?v={$version}">
    <script src="/static/index/js/jquery.min.js?v={$version}"></script>
    <script src="/static/index/js/bootstrap.min.js?v={$version}"></script>
</head>
<body>
    <!-- 头部 -->
    <div class="container sam-header">
        <div class="icon"></div>
        <div class="words">信息发布</div>
    </div>
    <!-- 头部 END -->

    <!-- 表单 -->
    <form id="form">
        <div class="container sam-white-bg sam-form-line">
            <div class="left">
                <span>*</span>发布类型</div>
            <div class="right">
                <div class="select-text"></div>
                <div class="select-arrow"></div>
                <select name="type" class="hide-select">
                    <option value="-1">请选择</option>
                    {foreach name="$category" item="item"}
                        <option value="{$item.id}">{$item.name}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="container sam-white-bg sam-form-line">
            <div class="left">
                <span>*</span>标题</div>
            <div class="right">
                <input type="text" name="title" placeholder="请用一句话描述你要发的内容" value="" />
            </div>
        </div>
        <div class="container sam-white-bg sam-form-line">
            <div class="left">
                <span>*</span>联系人</div>
            <div class="right">
                <input type="name" name="title" placeholder="请填写联系人姓名" value="" />
            </div>
        </div>
        <div class="container sam-white-bg sam-form-line">
            <div class="left">
                <span>*</span>电话号码</div>
            <div class="right">
                <input  name="phone" placeholder="请填写联系电话号码" value="" />
            </div>
        </div>
        <div class="container sam-white-bg sam-form-line">
            <div class="left">
                <span>&nbsp;&nbsp;</span>详情</div>
            <div class="right">
                <textarea name="detail" placeholder="请填写详情信息" rows="5"></textarea>
            </div>
        </div>
        <div class="container sam-white-bg sam-form-line">
            <div class="left">
                <span>&nbsp;&nbsp;</span>图片</div>
            <div class="right">
                <div class="sam-image-uploader">
                    <input type="file" name="images" accept="image/jpeg,image/jpg,image/png" value="" />
                </div>
            </div>
            <div class="tips">注意：图片不能超过3张</div>
        </div>

        <div class="submit-btn">
            <div class="icon"></div>
            <div class="words">立即免费发布</div>
        </div>
    </form>
    <!-- 表单 END -->

    <script>
        /*
        * 这部分可以写成外部引入公用
        * */

        $('.sam-form-line .right>.select-text').each(function(index,elm) {
            $(elm).text($(elm).siblings('select').eq(0).find("option[value='-1']").eq(0).text());
        });

        $('.sam-form-line .right>select').change(function(e) {
            selVal = $(this).val();
            selText = $(this).siblings('.select-text').eq(0);
            if(selVal === '-1') {
                selText.removeClass('chosen');
                selText.text($(this).find("option[value='-1']").eq(0).text());
            }else{
                selText.addClass('chosen');
                selText.text($(this).find('option:selected').text());
            }
        });

        var ImageArr = new Array();
        var ImageExt = ['image/jpeg','image/jpg','image/png'];

        $('.sam-image-uploader').find('input[type=file]').click(function(e) {
            e.stopPropagation();
        });

        $('.sam-image-uploader').click(function(e) {
            e.stopPropagation();
            e.preventDefault();
            $(this).find('input[type=file]').click();
        });

        $('.sam-image-uploader').find('input[type=file]').change(function(e) {
            var file = this.files[0];
            if(!file) {
                alert('没有上传文件');
                return false;
            }else if(ImageArr.length >= 3){
                alert('最多上传3张图片');
                return false;
            }else if(ImageExt.indexOf(file.type) < 0) {
                alert('不支持的图片格式');
                return false;
            }else if(file.size > 5242880) {
                alert('上传的图片不能超过5M');
                return false;
            }
            var _this = $(this);
            var fileReader = new FileReader();
            fileReader.onloadstart = function () {

            };
            fileReader.onloadend = function (e) {
                if(e.target.result) {
                    _this.parent('.sam-image-uploader').parent('.right').append('<div class="sam-image-shower" style="background-image: url(' + e.target.result + ');"><div class="sam-image-cross" onclick="deleteUploadImage(this);">删除</div></div>');
                    ImageArr.push(file);
                    if(ImageArr.length >= 3) _this.parent('.sam-image-uploader').hide();
                    _this.val('');
                    return true;
                }
                alert('图片解析失败');
                return false;
            };

            fileReader.onerror = function () {
                alert('图片解析失败');
                return false;
            };
            fileReader.readAsDataURL(file);
        });

        function deleteUploadImage(elm) {
            if(!elm) return false;
            var shower = $(elm).parent('.sam-image-shower');
            ImageArr.splice(shower.index() - 1,1);
            if(ImageArr.length < 3) shower.siblings('.sam-image-uploader').eq(0).show();
            shower.remove();
        }

        /*
        * 这部分可以写成外部引入公用 END
        * */
    </script>
</body>
</html>